<template>
  <view class="ZS">
	  <view class="cu-form-group">
	    <view></view>
	    <button class="cu-btn bg-blue shadow" @tap="toAddCourse">
	      新增<text class="cuIcon-add"></text>
	    </button>
	  </view>
    <scroll-view :scroll-x="true" class="ScroViewClass" enable-back-to-top="true">

     <!-- <view class="cu-form-group">
        <view class="title">班级名称</view>
        <input placeholder="请输入班级名称" @input="onCourseNameConfirm">
       
      </view>
 -->	 <!-- <view class="cu-form-group">
        <view class="title">是否启用</view>
        <radio-group @change="changeStatus">
          <view class="flex">
            <view>
              <label class="text-sm">是</label>
              <radio
                  :class="['radio','blue',curSelectStatus === '1' ? 'checked' : '']"
                  :checked="curSelectStatus === '1'"
                  value="1"
                  style="transform: scale(0.8)"
              >
              </radio>

              <label class="text-sm">否</label>
              <radio
                  :class="['radio','blue',curSelectStatus === '0' ? 'checked' : '']"
                  :checked="curSelectStatus === '0'"
                  value="0"
                  style="transform: scale(0.8)"
              >
              </radio>
            </view>
          </view>
        </radio-group>
      </view> -->
     <!-- <view class="cu-form-group">
        <view class="title">专业</view>
        <picker @change="onPickMajor" :value="curPickMajorIdx" :range="majorOpts" range-key="label">
          <view class="picker">
            {{curPickMajorIdx>-1?majorOpts[curPickMajorIdx].label:'请选择'}}
          </view>
        </picker>
      </view>
			<view class="cu-form-group">
				<view class="title">专业班</view>
				<picker @change="onZyClass" :value="curPickMajorIdxto" :range="ZyClass" range-key="label">
					<view class="picker">
						{{curPickMajorIdxto>-1?ZyClass[curPickMajorIdxto].label:'请选择'}}
					</view>
				</picker>
			</view> -->
			<view class="" style="width: 1000rpx;">
				<view class="bg-white padding-sm">
				  <view class="grid margin-bottom text-center text-sm text-bold col-6">
				    <view class="table-title-bg padding flex-sub">班级ID</view>
						  <!-- <view class="table-title-bg padding flex-twice">专业班编号</view> -->
				    <view class="table-title-bg padding flex-twice">班级名称</view>
						  <view class="table-title-bg padding flex-twice">开始招生时间</view>
						  <view class="table-title-bg padding flex-twice">结束招生时间</view>
				    <view class="table-title-bg padding flex-twice">人数</view>
				    <view class="table-title-bg padding flex-twice">状态</view>
				  </view>
				
				  <view class="table-item grid margin-bottom text-center col-6 text-sm" v-for="item in courseZSList" :key="item.CLASS_ID" @tap="toDetail(item.CLASS_ID + '')">
				    <view class="padding flex-sub">{{item.CLASS_ID}}</view>
									<!-- <view class="padding flex-sub">{{item.COURSENO}}</view> -->
				    <view class="padding flex-twice text-blue" style="text-decoration: underline">{{item.CLASSNAME}}</view>
						   <view class="padding flex-twice text-blue" style="text-decoration: underline">{{item.S_ZS_DATE}}</view>
						    <view class="padding flex-twice text-blue" style="text-decoration: underline">{{item.E_ZS_DATE}}</view>
				    <view class="padding flex-twice" style="word-break:break-all;">{{item.MINNUM}}-{{item.MAXNUM}}</view>
				    <view class="padding flex-sub">{{item.STATENR}}</view>
				  </view>
				   </view>
			</view>
		 </scroll-view>
        <view v-if="courseZSList.length === 0" class="text-sm text-center">-- 暂无数据 --</view>
     

      <view class="cu-form-group" v-if="total > 0">
        <view class="title" @tap="firstPage()"><text class="check-info-btn">首页</text></view>
        <view class="title" @tap="lastPage()"><text class="check-info-btn">上一页</text></view>
        <view class="title">{{page}}/{{total}}</view>
        <view class="title" @tap="nextPage()"><text class="check-info-btn">下一页</text></view>
        <view class="title" @tap="endPage()"><text class="check-info-btn">尾页</text></view>
      </view>
   
  </view>
</template>

<script lang="ts" setup>
import {usePagination} from "../../utils/usePagination";
import {useCourseZSList} from "./useCourseZSList";
import {computed, onMounted, ref} from "vue";
import {onPullDownRefresh,onLoad,onShow} from "@dcloudio/uni-app";
import {useSKSJOpts} from "./useSKSJOpts";
const {SKSJOpts} = useSKSJOpts()

const COURSE_ID = ref<any>("")
const MAJOR_ID = ref<any>("")
const COURSENAME = ref<any>("")
const MAJOR_NAME = ref<any>("")
function toAddCourse(){
	uni.navigateTo({
	  url: `/pages/manage/ZSDetail?COURSE_ID=${COURSE_ID.value}&&COURSENAME=${COURSENAME.value}&&MAJOR_ID=${MAJOR_ID.value}&&MAJOR_NAME=${MAJOR_NAME.value}`
	})
	uni.setStorageSync("SKSJOpts",SKSJOpts) //
}
const inputCourseName = ref('')

function onCourseNameConfirm(e:any){
  inputCourseName.value = e.detail.value
  page.value = 1
}

const curSelectStatus = ref<'1' | '0'>('1')
const {initCourseZSList,courseZSList,total,initgetRDCourseList,ZyClass}:any = useCourseZSList()
const pageSize = 20
const page = ref<any>(1)
function firstPage() {
  page.value = 1
	initCourseZSList(page.value,20,{
		COURSE_ID:COURSE_ID.value })
}

function lastPage(){
  if (page.value > 1){
    page.value-- 
		initCourseZSList(page.value,20,{
			COURSE_ID:COURSE_ID.value
		})
  }
}

function nextPage() {
  if (page.value < total.value){
    page.value++
		initCourseZSList(page.value,20,{
			COURSE_ID:COURSE_ID.value
		})
  }
}

function endPage(){
  page.value = total.value
	initCourseZSList(page.value,20,{
		COURSE_ID:COURSE_ID.value
	})
}

onLoad((option:any)=>{
	COURSE_ID.value= option.COURSE_ID
	MAJOR_ID.value =option.MAJOR_ID
	COURSENAME.value = option.COURSENAME
	MAJOR_NAME.value = option.MAJOR_NAME
})

onShow(()=>{
	initCourseZSList(1,20,{
		COURSE_ID:COURSE_ID.value
	})
})

onPullDownRefresh(() => {
  initCourseZSList(1,20,{
  	COURSE_ID:COURSE_ID.value
  })
  uni.stopPullDownRefresh()
})

onMounted(() => {
  uni.$on('ZSUpdate',() => {
    const oldPage = page.value
    page.value = -1
    page.value = oldPage
  })
})

async function toDetail(CLASS_ID: string){
  uni.navigateTo({
    url: `/pages/manage/ZSDetail?CLASS_ID=${CLASS_ID}&&COURSE_ID=${COURSE_ID.value}&&COURSENAME=${COURSENAME.value}&&MAJOR_ID=${MAJOR_ID.value}&&MAJOR_NAME=${MAJOR_NAME.value}`
  })
  uni.setStorageSync("SKSJOpts",SKSJOpts)  //获取上课时间piker内容预加载
}
</script>

<style scoped lang="scss">
.ZS{
  .cu-form-group .title {
    min-width: calc(4em + 15px);
  }
  .check-info-btn {
    color: #01AAED;
  }
  .ScroViewClass {
    min-height: 300rpx;
    padding-bottom: constant(safe-area-inset-bottom);  ///兼容 IOS<11.2/
    padding-bottom: env(safe-area-inset-bottom);  ///兼容 IOS>11.2/
  }
  .table-title-bg {
    background-color: #DDDDDD;
  }

  .table-item:active{
    background-color: #DDDDDD;
  }
}
</style>
